import { useEffect, useState } from "react";
import CssBaseline from "@mui/material/CssBaseline";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import * as request from "./utils/request";
import { getCapatchImage } from "./api/Api";
import useAsyncFn from "./utils/useAsyncFunc";
import { json } from "stream/consumers";
import { UserProvider } from "./provider/UserProvider";

request.useHost("http://127.0.0.1:8080/");

// TODO remove, this demo shouldn't need to reset the theme.
const defaultTheme = createTheme();

export default function Main() {
  const [category, setCategory] = useState<
    { title: string; router: string; id: string }[]
  >([]);
  console.log("Index");
  const [captchResult, doCaptach] = useAsyncFn(getCapatchImage, []);
  console.log(`captchResult:${JSON.stringify(captchResult)}`)

  const refreshCaptch = async()=>{
    try{
      doCaptach().then(res=>{
        console.log(`res:${JSON.stringify(res)}`)

        console.log(`captchResult:${JSON.stringify(captchResult)}`)
     }).catch(error=>{
        console.log(`error:${JSON.stringify(error)}`)
     })
    }catch(e){
        console.log(`exception:${JSON.stringify(e)}`)
    }
     
  }

  useEffect(() => {
    refreshCaptch() 
  }, []);

  return (
    <ThemeProvider theme={defaultTheme}>
      <CssBaseline />
      <UserProvider>

      </UserProvider>
      <Container maxWidth="lg"></Container>
    </ThemeProvider>
  );
}
